<script lang="ts" setup>
	import { ref, reactive, inject, toRefs } from "vue";
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let orderId = ref()
	let orderDetail = ref(null)
	let kuaidiName = ref('')
	let kuaidiNum = ref('')
	onLoad((option) => {
		console.log(option.id);
		orderId.value = option.id
		getDetail()
	})
	onUnload(() => {
		uni.$off('refreshSend')
	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.gysOrderDetail, {
			id: orderId.value,
		}).then((res) => {
			console.log(res);
			orderDetail.value = res.result
		})
	}
	const fahuo = () => {
		console.log(kuaidiNum.value, kuaidiName.value);
		if (!kuaidiName.value || !kuaidiNum.value) {
			uni.$u.toast('请完善快递信息')
			return
		}
		proxy.$req('POST', proxy.$api.gysOrderEdit, {
			id: orderId.value,
			status: 3,
			deliveryId: kuaidiNum.value,
			deliveryName: kuaidiName.value
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				uni.$emit('refreshSend')
				setTimeout(() => {
					router.back()
				}, 500)
			}
		})
	}
</script>
<template>
	<view class="allContainer" v-if="orderDetail!=null">
		<view class="goodsInfo">
			<view class="giTit">订单编号：{{ orderDetail.tradeNo }}</view>
			<view class="gcGoods r-flex-start-start" v-for="(item,index) in orderDetail.orderInfoList" :key="index">
				<image :src="item.sku!=null?item.sku.logo:''" mode=""></image>
				<view class="gcgCon c-flex-start-start">
					<text class="u-line-1">{{ item.productName }}</text>
					<text>￥{{ item.price }}</text>
					<text>×{{ item.cartNum }}</text>
				</view>
			</view>
			<view class="huiBox c-flex-start-start">
				<text class="address">
					{{ orderDetail.realName }}，{{ orderDetail.userPhone }}，{{ orderDetail.userAddress }}
				</text>
			</view>
		</view>
		<view class="infoItem">
			<text>发货方式</text>
			<input type="text" value="自己联系物流" placeholder="填写备注" disabled style="text-align: right;font-size:28rpx"
				placeholder-style="font-size:28rpx">
		</view>
		<view class="infoItem">
			<text>物流公司</text>
			<view class="r-flex-center-center">
				<input type="text" v-model="kuaidiName" placeholder="请输入" style="text-align: right;font-size:28rpx"
					placeholder-style="font-size:28rpx">
				<!-- <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>
		<view class="infoItem">
			<text>运单号</text>
			<input type="text" v-model="kuaidiNum" placeholder="请输入运单号" style="text-align: right;font-size:28rpx"
				placeholder-style="font-size:28rpx">
		</view>
		<view class="confirm" @click="fahuo">
			确认
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.allContainer {
		padding: 16rpx 32rpx;
		padding-bottom: 200rpx;
	}

	.goodsInfo {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;

		.giTit {
			font-size: 24rpx;
			color: #909399;
			margin-bottom: 32rpx;
		}

		.gcGoods {
			margin-bottom: 32rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				margin-right: 16rpx;
			}

			.gcgCon {
				width: 450rpx;

				text:nth-child(1) {
					font-weight: 600;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					margin: 16rpx 0;
				}

				text:nth-child(3) {
					font-size: 28rpx;
				}
			}
		}

		.huiBox {
			padding: 32rpx;
			background-color: #F5F6F8;
			border-radius: 10rpx;


			.address {
				font-size: 24rpx;
			}
		}
	}

	.infoItem {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.confirm {
		width: 686rpx;
		margin: 100rpx auto 0;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #CB645E;
		border-radius: 10rpx;
	}
</style>